<template>
    <div class="prorder">
        <div class="prordertitle">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span class="prot1">筛选：</span>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                            {{dropdownValue}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="changedropvalue('全部订单')">全部订单</el-dropdown-item>
                                <el-dropdown-item @click.native="changedropvalue('待处理订单')">待处理订单</el-dropdown-item>
                                <el-dropdown-item @click.native="changedropvalue('已完成订单')">已完成订单</el-dropdown-item>
                                <el-dropdown-item @click.native="changedropvalue('已作废订单')">已作废订单</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" style="background-color: #099FB8" @click="addreorder">新增</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="prordertable">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table
                                :cell-style="rowClass"
                                :header-cell-style="headClass"
                                border
                                :data="currentData"
                                style="width: 100%;height:400px">
                            <el-table-column
                                    label="单号"
                                    width="">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.orderNumber}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="金额"
                                    width="">
                                <template slot-scope="scope">
                                    {{scope.row.orderMainPrice}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="下单时间"
                                    width="">
                                <template slot-scope="scope">
                                    {{scope.row.orderTime}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="审核状态"
                                    width="">
                                <template slot-scope="scope">
                                    {{ scope.row.orderAuditStatus}}
<!--                                    <el-popover trigger="hover" placement="top">-->
<!--                                        <span>处理时间：</span>/-->
<!--                                        <span>处理信息：{{ scope.row.infor}}</span>-->
<!--                                        <div slot="reference" class="name-wrapper">-->
<!--                                            <el-tag size="medium"><i class="el-icon-time"></i>跟踪</el-tag>-->
<!--                                            <el-tag size="medium">{{ scope.row.state1}}</el-tag>-->
<!--                                        </div>-->
<!--                                    </el-popover>-->
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="退款状态"
                                    width="">
                                <template slot-scope="scope">
                                    {{ scope.row.outStatus}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                            class="details"
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">订单详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="5"
                :pager-count="7"
                :total="pageNum"
                @current-change="changePage"
                :current-page="currentPage">
        </el-pagination>
    </div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "ReturnsOrder",
        data(){
            return {
                dropdownValue:'全部订单',
                inputValue_danhao:'',
                inputValue_money:'',
                inputValue_state1:'待退款审核',
                inputValue_state2:'未退款',
                dialogVisible: false,
                currentPage:1,
                selectValue:'',
                tableData: [{
                    danhao: '000001',
                    money:'2219',
                    time:'2020-1-20',
                    infor:'上海市普陀区金沙江路 1517 弄',
                    state1:'待退款审核',
                    state2:'未退款',
                }, {
                    danhao: '000002',
                    money:'2345',
                    time:'2020-1-20',
                    infor:'上海市普陀区金沙江路 1517 弄',
                    state1:'待退款审核',
                    state2:'未退款',
                }, {
                    danhao: '000003',
                    money:'345345',
                    time:'2020-1-20',
                    infor:'上海市普陀区金沙江路 1517 弄',
                    state1:'待退款审核',
                    state2:'未退款',
                }, {
                    danhao: '000004',
                    money:'4000',
                    time:'2020-1-20',
                    infor:'上海市普陀区金沙江路 1517 弄',
                    state1:'待退款审核',
                    state2:'未退款',
                },{
                    danhao: '000005',
                    money:'1000',
                    time:'2020-1-20',
                    infor:'上海市普陀区金沙江路 1517 弄',
                    state1:'待退款审核',
                    state2:'未退款',
                }]
            }
        },
        computed:{
            currentData(){
                return this.getreorderdata()
            },
            pageNum(){
                return this.getreallcount()
            }
        },
        methods: {
            ...mapGetters(['getreorderdata','getreallcount']),
            ...mapActions(['changereordernumber','getReorderData','reorderdatadetails']),
            handleEdit(index, row) {
                let obj={
                    orderNumber:row.orderNumber
                }
                this.reorderdatadetails(obj).then(res=>{
                    if(res===200){
                        this.$router.push('/Main/Order/ReOrderDetails')
                    }
                })
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            // 表头样式设置
            headClass () {
                return 'text-align: center;background:#F5F6F7;'
            },
            // 表格样式设置
            rowClass () {
                return 'text-align: center;'
            },
            changePage(val){
                this.currentPage=val
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            addreorder(){
                // this.dialogVisible = false
                // /*获取系统时间*/
                // let inputValue_danhao=this.inputValue_danhao
                // let inputValue_money=this.inputValue_money
                // let inputValue_state1=this.inputValue_state1
                // let inputValue_state2=this.inputValue_state2
                this.$router.push('/Main/Order/AddNewReOrder')
            },
            changedropvalue(value){
                /*注意这里传的是value*/
                if(value==='全部订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }else if(value==='待处理订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }else if(value==='已完成订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }else if(value==='已作废订单'){
                    this.dropdownValue=value
                    this.selectValue=value
                }
                if(this.selectValue==='全部订单'){
                    this.selectValue=0
                }else if(this.selectValue==='待处理订单'){
                    this.selectValue=1
                }else if(this.selectValue==='已完成订单'){
                    this.selectValue=2
                }else if(this.selectValue==='已作废订单'){
                    this.selectValue=3
                }
                console.log(this.selectValue)
                let obj={
                    clientId: sessionStorage.getItem('clientId'),//获取客户（登陆者的）id
                    condition: {
                        currentPage: this.currentPage,
                        perSize: 5,
                        selectValue:this.selectValue
                    }
                }
                this.getReorderData(obj).then()
            },
            changePage(val){
                this.currentPage=val
                /*传当前页和需要几页*/
                if(this.selectValue===""){
                    this.selectValue=0
                }
                let obj={
                    clientId: sessionStorage.getItem('clientId'),//获取客户（登陆者的）id
                    condition: {
                        currentPage: this.currentPage,
                        perSize: 5,
                        selectValue: this.selectValue
                    }
                }
                this.getReorderData(obj)
            },
        },
        created() {
            let obj={
                clientId: sessionStorage.getItem('clientId'),//获取客户（登陆者的）id
                condition: {
                    currentPage: this.currentPage,
                    perSize: 5,
                    selectValue: 0
                }
            }
            this.getReorderData(obj)
        }
    }
</script>

<style scoped>
    .prordertitle{
        margin: 20px 0;
    }
    .el-dropdown{
        color: #606266;
        font-size: 14px;
    }
    .prot1{
        color: #606266;
        font-size: 14px;
        margin-left: 10px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-table-column{
        text-align: center;
        background-color: #F5F6F7;
    }
    .details{
          color: white;
          background-color: #099FB8;
      }
    .el-pagination{
        text-align: center;
        margin-top: 20px;
    }
    .el-input{
        margin: 10px 0;
        width: 200px;
    }
</style>